<template>
  <div style="width: 100%; height: 100%">
    <div style="height: 5%; width: 90%; margin: 10px 0px 0 10px">
      <div style="float: left">
        <img slot="item-icon" src="@/assets/img/little_icon/xftjb.png" />&nbsp;
      </div>
      <span style="font-size: 20px">信访统计报表</span>
    </div>
    <el-divider></el-divider>

    <!-- 信访总数量 -->
    <div style="height: 15%; text-align: center">
      <div style="height: 100%">
        <div style="width: 25%; float: left; margin-top: 3%">
          <span style="font-size: 15px"
            >信访总数量<br />
            <span style="font-weight: 600">{{ receiving.number }}份</span>
            <br />
            <span style="color: red"> {{ receiving.percentage }}</span></span
          >
        </div>
        <div id="XFTJ" style="float: left; margin-top: -10%"></div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 已办结信件 -->
    <div style="height: 15%; text-align: center">
      <div style="height: 90%">
        <div style="width: 25%; float: left; margin-top: -2%">
          <span style="font-size: 15px"
            >已办结信件<br />
            <span style="font-weight: 600">{{ receiving.number }}份</span>
            <br />
            <span style="color: red"> {{ receiving.percentage }}</span></span
          >
        </div>
        <div id="YBJXJ" style="float: left; margin-top: -16%"></div>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 已办结信件 -->
    <div style="height: 15%; text-align: center">
      <div style="height: 100%">
        <div style="width: 25%; float: left; margin-top: 5%">
          <span style="font-size: 15px"
            >未办结信件<br />
            <span style="font-weight: 600">{{ receiving.number }}份</span>
            <br />
            <span style="color: red"> {{ receiving.percentage }}</span></span
          >
        </div>

        <div id="WBJXJ" style="float: left; margin-top: -8%"></div>
      </div>
      <el-divider></el-divider>
    </div>

    <div>
      <div style="margin: 5% 2%">
        <div style="float: left; margin: -3px">
          <img slot="item-icon" src="@/assets/img/document/long.png" />&nbsp;
        </div>
        <span style="font-size: 18px">办理状态统计 </span>
      </div>
      <div id="BLZT" style="margin: -10% -2%"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PetItem",
  data() {
    return {
      receiving: {
        number: 0,
        percentage: "+0.22%",
      },
    };
  },
  mounted() {
    this.drawLineZS();
    this.drawLineBJ();
    this.drawLineWBJ();
    this.drawLineBL();
  },
  methods: {
    drawLineZS() {
      let myChart = this.$echarts.init(document.getElementById("XFTJ"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "350px",
        height: "200px",
      });
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260, 260, 260, 260, 260, 260],
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    drawLineBJ() {
      let myChart = this.$echarts.init(document.getElementById("YBJXJ"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "350px",
        height: "150px",
      });
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220, 231, 239, 290, 304, 102],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    drawLineWBJ() {
      let myChart = this.$echarts.init(document.getElementById("WBJXJ"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "350px",
        height: "150px",
      });
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            axisLabel: {
              interval: 0,
            },
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220, 231, 239, 290, 304, 102],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    drawLineBL() {
      let myChart = this.$echarts.init(document.getElementById("BLZT"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "500px",
        height: "280px",
      });
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "10px",
          bottom: "bottom",
          itemGap: 40,
        },
        series: [
          {
            type: "pie",
            radius: ["55%", "70%"],
            avoidLabelOverlap: true,
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "逾期完成" },
              { value: 735, name: "正常完成" },
              { value: 580, name: "逾期进行" },
              { value: 484, name: "正常进行" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>